<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>todolist-angular</title>
    
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
        font-size: 16px;
        background: #CDCDCD;
    }
    
    header {
        height: 50px;
        background: #333;
        background: rgba(47, 47, 47, 0.98);
    }
    
    section {
        margin: 0 auto;
    }
    
    label {
        float: left;
        width: 100px;
        line-height: 50px;
        color: #DDD;
        font-size: 24px;
        cursor: pointer;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    
    header input {
        float: right;
        width: 60%;
        height: 24px;
        margin-top: 12px;
        text-indent: 10px;
        border-radius: 5px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
        border: none
    }
    
    input:focus {
        outline-width: 0
    }
    
    h2 {
        position: relative;
    }
    
    span {
        position: absolute;
        top: 2px;
        right: 5px;
        display: inline-block;
        padding: 0 5px;
        height: 20px;
        border-radius: 20px;
        background: #E6E6FA;
        line-height: 22px;
        text-align: center;
        color: #666;
        font-size: 14px;
    }
    
    ol,
    ul {
        padding: 0;
        list-style: none;
    }
    
    li input {
        position: absolute;
        top: 2px;
        left: 10px;
        width: 22px;
        height: 22px;
        cursor: pointer;
    }
    
    p {
        margin: 0;
    }
    
    li p input {
        top: 3px;
        left: 40px;
        width: 70%;
        height: 20px;
        line-height: 14px;
        text-indent: 5px;
        font-size: 14px;
    }
    
    li {
        height: 32px;
        line-height: 32px;
        background: #fff;
        position: relative;
        margin-bottom: 10px;
        padding: 0 45px;
        border-radius: 3px;
        border-left: 5px solid #629A9C;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    }
    
    ol li {
        cursor: move;
    }
    
    ul li {
        border-left: 5px solid #999;
        opacity: 0.5;
    }
    
    li a {
        position: absolute;
        top: 2px;
        right: 5px;
        display: inline-block;
        width: 14px;
        height: 12px;
        border-radius: 14px;
        border: 6px double #FFF;
        background: #CCC;
        line-height: 14px;
        text-align: center;
        color: #FFF;
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
    }
    
    footer {
        color: #666;
        font-size: 14px;
        text-align: center;
    }
    
    footer a {
        color: #666;
        text-decoration: none;
        color: #999;
    }
    
    @media screen and (max-device-width: 620px) {
        section {
            width: 96%;
            padding: 0 2%;
        }
    }
    
    @media screen and (min-width: 620px) {
        section {
            width: 600px;
            padding: 0 10px;
        }
    }
    </style>
</head>

<body>
    <div id="app">

    
    <header>
        <section>
            <form id="form" @submit.prevent>
                <label for="title">ToDoList</label>
                <input type="text" id="title" v-model="write" name="title" placeholder="添加ToDo" @keydown.13="enterTask(write)"/>
            </form>
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount">{{todolist.length}}</span></h2>
        <ol id="todolist" class="demo-box">
        	
        	<li v-for="(item,key) in todolist">
        		<input type="checkbox" @change="todoinput(key)" :checked="false"/>
        		<p>
                    {{item.con}}
        		</p>
        		<a @click="del(key,'todo')">-</a>
        	</li>
        </ol>
        <h2>已经完成 <span id="donecount">{{donelist.length}}</span></h2>
        <ul id="donelist">
        	<li v-for="(item,key) in donelist">
        		<input type="checkbox" :checked="true" @change="doneinput(key)"/>
        		<p>
					{{item.con}}
        		</p>
        		<a @click="del(key,'done')">-</a>
        	</li>
        </ul>
    </section>
    <footer>
        Copyright &copy; 2014 todolist.cn <a href="javascript:clear();">clear</a>
    </footer>
</div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el:'#app',
            data:{
                todolist:[],//正在进行的事件列表
                donelist:[],//已经完成的事件列表
                write:''//input框中输入的内容
            },
            methods:{
                enterTask:function(write){
                    // 给todolist添加内容
                    this.todolist.push({con:write});
                    // 清除输入框中的内容
                    this.write='';
                },
                todoinput:function(index){
                    // 从todoList中拿到该项
                    var item=this.todolist[index];
                    // 从todoList中删除
                    this.todolist.splice(index,1);
                    // 添加到donelist中
                    this.donelist.push(item);
                },
                doneinput:function(index){
                    // 从doneList中拿到该项
                    var item=this.donelist[index];
                    // 从doneList中删除
                    this.donelist.splice(index,1);
                    // 添加到todolist中
                    this.todolist.push(item);
                },
                del:function(index,str){
                    if(str==='done'){
                        this.donelist.splice(index,1);
                    }else if(str==='todo'){
                        this.todolist.splice(index,1);
                    }

                }
            }
        })
    </script>
</body>

</html>
